<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>camera</title>
    <script type="text/javascript" src="./js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background-color: #fff;
        font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    }
    
    main {
        width: 100%;
        background-color: #fff;
        /*box-shadow: 0px 3px 4px #eeeeee;*/
        position: relative;
    }
    /*顶部导航栏*/
    
    header {
        width: 100%;
        height: 40px;
        min-width: 1226px;
        background-color: #333333;
    }
    
    nav {
        width: 1226px;
        margin: auto;
        background-color: #333333;
        box-sizing: border-box;
    }
    
    .top-ul {
        list-style-type: none;
    }
    
    .top-li {
        float: left;
    }
    
    .top-li a {
        text-decoration: none;
        line-height: 40px;
        color: #b0b0b0;
        font-size: 12px;
        padding: 0 6px;
        border-right: 1px solid #423d39;
    }
    
    .top-li:nth-of-type(1) a {
        padding: 0;
        padding-right: 8px;
    }
    
    .top-li:last-child a {
        border: none;
    }
    
    .top-li a:hover {
        color: #fff;
    }
    
    .top-right {
        float: right;
        position: relative;
        background-color: #333333;
    }
    
    .top-right span {
        color: #b0b0b0;
        font-size: 12px;
        line-height: 40px;
        cursor: pointer;
    }
    
    .top-right-one,
    .top-right-two {
        padding: 0 4px;
        border-right: 1px solid #423d39;
    }
    
    .top-right-three {
        display: inline-block;
        margin-right: 20px;
        padding-left: 7px;
    }
    
    .top-right-one:hover {
        color: #FFF;
    }
    
    .top-right-two:hover {
        color: #FFF;
    }
    
    .top-right-three:hover {
        color: #fff;
    }
    
    .top-right-four:hover {
        background-color: #fff;
        color: #ff6700;
    }
    
    .top-right-four {
        display: inline-block;
        width: 120px;
        height: 40px;
        background-color: #424242;
        text-align: center;
        background-image: url('./index-images/buy.png');
        background-repeat: no-repeat;
        background-position: 10px 12px;
    }
    
    .top-right-four:hover {
        background-image: url('./index-images/buy2.png');
    }
    
    .shop {
        width: 318px;
        height: 100px;
        position: absolute;
        top: 40px;
        right: 0px;
        z-index: 10;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        line-height: 100px;
        color: #424242;
        display: none;
    }
        /*第二个导航区域*/
    
    .content_1 {
        width: 1226px;
        height: 100px;
        margin: auto;
        min-width: 1226px;
    }
    
    .content_1-logo {
        width: 55px;
        height: 55px;
        float: left;
        margin-top: 22.5px;
        margin-right: 15px;
        cursor: pointer;
    }
    
    .content_1-logo img {
        width: 55px;
        height: 55px;
    }
    
    .content_1-pro {
        float: left;
        margin-top: 17px;
        margin-right: 11px;
        cursor: pointer;
    }
    
    .content_1-ul {
        list-style-type: none;
    }
    
    .content_1-li {
        float: left;
        line-height: 100px;
        color: #333333;
    }
    
    .content_1-li a {
        display: inline-block;
        height: 100px;
        text-decoration: none;
        color: #333333;
        font-size: 16px;
        margin-right: 20px;
    }
    
    .content_1-li a:hover {
        color: #ff6700;
    }
    
    .content_1-search {
        float: right;
        margin-top: 25px;
        position: relative;
        width: 295px;
        height: 50px;
        z-index: 10000;
    }
    
    .content_1-search input[type="text"] {
        width: 295px;
        height: 50px;
        border: 1px solid #e0e0e0;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .content_1-search input[type="text"]:hover {
        border-color: #b0b0b0;
    }
    
    .content_1-search-one {
        display: inline-block;
        text-decoration: none;
        color: #757575;
        font-size: 12px;
        text-align: center;
        background-color: #eeeeee;
        width: 100px;
        height: 18px;
        position: absolute;
        top: 16px;
        left: 48px;
    }
    
    .content_1-search-two {
        display: inline-block;
        text-decoration: none;
        color: #757575;
        font-size: 12px;
        text-align: center;
        background-color: #eeeeee;
        width: 84px;
        height: 18px;
        position: absolute;
        top: 16px;
        right: 60px;
    }
    
    .content_1-search-one:hover {
        color: #fff;
        background-color: #ff6700;
    }
    
    .content_1-search-two:hover {
        color: #fff;
        background-color: #ff6700;
    }
    
    .content_1-search .content_1-search-p {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        text-align: center;
        border-left: 1px solid #e0e0e0;
        box-sizing: border-box;
        background-image: url('./index-images/search.png');
        background-repeat: no-repeat;
        background-position: 15px 16px;
    }
    
    .content_1-search-p:hover {
        background-color: #ff6700;
        color: #fff;
        background-image: url('./index-images/search2.png');
    }
    
    .keyword-search {
        width: 246px;
        height: 291px;
        border: 1px solid #ff6700;
        border-top: none;
        box-sizing: border-box;
        z-index: 9999;
        background-color: #fff;
        display: none;
    }
    
    .keyword-search .keyword-search-list {
        list-style-type: none;
        z-index: 9999;
    }
    
    .keyword-search .keyword-search-list li a {
        display: block;
        position: relative;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
    }
    
    .keyword-search-list span {
        position: absolute;
        font-size: 12px;
        color: #b0b0b0;
        right: 15px;
    }
    
    .keyword-search .keyword-search-list li a:hover {
        background-color: #fafafa;
    }
    /*第二部分下拉菜单*/
    
    .content_1-menu {
        width: 100%;
        min-width: 1226px;
        height: 230px;
        border-top: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 3px 4px #cccccc;
        background-color: #fff;
        display: none;
        position: absolute;
        top: 140px;
        left: 0px;
        z-index: 10000;
    }
    
    .container-menu {
        width: 1226px;
        margin: auto;
        position: relative;
    }
    
    .container-menu ul {
        list-style-type: none;
        margin-left: 15px;
        position: absolute;
    }
    
    .container-menu ul li {
        float: left;
        padding: 35px 12px 0;
        text-align: center;
        font-size: 12px;
    }
    
    .container-menu ul li div {
        border-right: 1px solid #e0e0e0;
    }
    
    .container-menu ul li:last-child div {
        border: none;
    }
    
    .container-menu ul li p {
        line-height: 20px;
    }
    
    .container-menu ul li p:nth-of-type(1) {
        margin-top: 10px;
        color: #333333;
    }
    
    .container-menu ul li p:nth-of-type(2) {
        color: #ff6700;
    }
    
    #four li img {
        width: 160px;
        height: 110px;
    }
    /*顶部导航栏固定*/
    .nav-bar{
    	width:100%;
    	height:50px;
    	position: absolute;
        /*margin-top:15px;*/
    	top:140px;
        opacity: 0.9;
        line-height: 50px;
    	background-color: #f5f5f5;
        z-index: 9999;
    }
    .nav-bar-container{
    	width:1226px;
        height:50px;
    	margin:0 auto;
    }
    .nav-bar-title{
        float: left;
        height:50px;
    }
    .nav-bar-title span{
        font-size: 18px;
        color:#424242;
    }
    .nav-bar-right{
        height:50px;
        float: right;
    }
    .nav-switch a{
        color: #616161;
        text-decoration: none;
        font-size: 14px;
    }
    .nav-bar-right a:last-child{
        display: inline-block;
        width:120px;
        height:30px;
        background-color: #ff6700;
        line-height: 30px;
        text-align: center;
        color:#fff;
        font-size: 12px;
        text-decoration: none;
    }
    .nav-switch span{
        color: #e0e0e0;
        font-family: sans-serif;
    }
    .nav-switch a:hover{
        color:#ff6700;
    }
    #active{
        color:#ff6700;
    }
    /*主体内容*/
    content{
        width:100%;
    }
    .section{
        width:100%;
    }
    /*第一部分*/
    .section1{
        height:1301px;
        min-width: 1226px;
        background-image: url('./camera-imgaes/c-bg1.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    .section1-container{
        width:1226px;
        margin: auto;
        padding-top:380px;
    }
    .section1--title{
        font-size: 44px;
        color:#fff;
        text-align: center;
    }
    .section1-suggest{
        padding-top: 425px;
        text-align: center;
        color: #333333;
        font-size: 18px;
        line-height: 30px;
    }
    .section1 ul{
        width:910px;
        margin:45px auto 0;
        zoom: 1;
    }
    .clearfix{
        clear: both;
    }
    .section ul li{
        width:300px;
        float: left;
        list-style-type: none;
        text-align: center;
        border-left:1px solid #e8e8e8;
    }
    .section ul li:first-child{
        border:none;
    }
    .section ul li span{
        display: inline-block;
        height:36px;
        width:100%;
        background-image: url('./camera-imgaes/c-text.jpg');
        background-repeat: no-repeat;
    }
    .t-icon1{
        background-position: center 0px;
    }
    .t-icon2{
        background-position: center -36px;
    }
    .t-icon3{
        background-position: center -72px;
    }
    .section1 ul li p{
        margin-top: 3px;
        font-size: 18px;
        color: #333333;
    }
    /*第二部分*/
    .section2{
        margin-top:50px;
    }
    .section2-container{
        width:1226px;
        margin:auto;
        text-align: center;
        font-size: 44px;
        color: #333333;
        line-height: 60px;
    }
    .section2-img{
        margin-top:60px;
        height:853px;
        background-image: url('./camera-imgaes/c-bg2.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    /*第三部分*/
    .section3{
        padding: 30px 0 136px;
        text-align: center;
        background: #e0e5eb;
    }
    .section3-title{
        font-size: 44px;
        line-height: 60px;
        color: #333333;
        text-align: center;
    }
    .section3-content{
        margin-top: 30px;
        line-height: 30px;
        font-size: 18px;
        text-align: center;
        box-shadow: 0 15px 30px #eeeeee;
    }
    .section3-side{
        max-width: 1600px;
        min-width:1226px;
        margin:50px auto 0;
        overflow: hidden;
        height:700px;
        position:relative;
    }
    .section3-carousel{
        max-width: 1600px;
        min-width:1226px;
        overflow: hidden;
        height:700px;
        position:relative;
    }
    .slide{
        max-width: 1600px;
        min-width:1226px;
        height:700px;
    }
    .slide1{
        background-image: url('./camera-imgaes/c-ban1.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    .section3-prev{
        width:62px;
        height:62px;
        position: absolute;
        top:50%;
        left:30px;
        background-image: url('./camera-imgaes/c-icons.png');
        background-position: 0 0;
        cursor: pointer;
    }
    .section3-next{
        width:62px;
        height:62px;
        position: absolute;
        top:50%;
        right:30px;
        background-image: url('./camera-imgaes/c-icons.png');
        background-position: 0 -62px;
        cursor: pointer;
    }
    /*第四部分*/
    .section4{
        width:100%;
        padding: 150px 0 200px;
        position: relative;
        overflow: hidden;
        background-color: #878f98;
    }
    .section4-container{
        width:1226px;
        margin:auto;
    }
    .section4-container span{
        display: block;
        font-size: 44px;
        line-height: 60px;
        text-align: center;
        color:#fff;
    }
    .section4-container p{
        font-size: 18px;
        line-height: 30px;
        margin-top:30px;
        text-align: center;
        color:#fff;
    }
    .section4-img{
        max-width: 1600px;
        min-width:1226px;
        margin:100px auto 0;
        overflow: hidden;
        height:700px;
        position:relative;
        background-image: url('./camera-imgaes/c-bg3.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    /*第五部分*/
    .section5{
        width:100%;
        padding: 150px 0 30px;
    }
    .section5-container{
        width:1226px;
        margin:auto;
    }
    .section5-container span{
        display: block;
        font-size: 44px;
        line-height: 60px;
        text-align: center;
    }
    .section5-container p{
        font-size: 18px;
        line-height: 30px;
        margin-top:30px;
        text-align: center;
    }
    .section5-img{
        /*max-width: 1600px;*/
        /*min-width:1226px;*/
        margin-top:50px;
        overflow: hidden;
        height:700px;
        position:relative;
        background-image: url('./camera-imgaes/c-bg4.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    /*第六部分*/
    .section6{
        width:100%;
        height:1010px;
        margin-top:70px;
        background-image: url('./camera-imgaes/c-bg5.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    .section6-container{
        width:1226px;
        margin:auto;
    }
    .section6-inner{
        padding: 140px 0 0 690px;
    }
    .section6-inner span{
        display: block;
        font-size: 44px;
        line-height: 60px;
        /*text-align: center;*/
        margin-top:90px;
    }
    .section6-inner p{
        font-size: 18px;
        line-height: 30px;
        margin-top:30px;
        /*text-align: center;*/
    }
    /*第七部分*/
    .section7{
        width:100%;
        height:1197px;
        background-image: url('./camera-imgaes/c-bg6.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    /*最后记得删除*/
    blank{

    }
    </style>
</head>

<body>
	<main>
		<header>
            <nav>
                <ul class="top-ul">
                    <li class="top-li"><a href="javascript:;">小米商城</a></li>
                    <li class="top-li"><a href="javascript:;">MIUI</a></li>
                    <li class="top-li"><a href="javascript:;">米聊</a></li>
                    <li class="top-li"><a href="javascript:;">游戏</a></li>
                    <li class="top-li"><a href="javascript:;">多看阅读</a></li>
                    <li class="top-li"><a href="javascript:;">云服务</a></li>
                    <li class="top-li"><a href="javascript:;">金融</a></li>
                    <li class="top-li"><a href="javascript:;">小米网移动版</a></li>
                    <li class="top-li"><a href="javascript:;">问题反馈</a></li>
                    <li class="top-li"><a href="javascript:;">Select Region</a></li>
                </ul>
                <div class="top-right">
                    <span class="top-right-one">登录</span>
                    <span class="top-right-two">注册</span>
                    <span class="top-right-three">消息通知</span>
                    <span class="top-right-four"> 购物车( 0 )
                <div class="shop">购物车中还没有商品，赶紧选购吧！</div></span>
                </div>
            </nav>
        </header>
        <!-- 导航栏第二部分 -->
        <div class="content_1">
            <div class="content_1-logo"><img src="./index-images/小米logo.png"></div>
            <div class="content_1-pro"><img src="./index-images/pro.gif"></div>
            <ul class="content_1-ul">
                <li class="content_1-li content_1-select" data-index="1"><a href="javascript:;">小米手机</a></li>
                <li class="content_1-li content_1-select" data-index="2"><a href="javascript:;">红米</a></li>
                <li class="content_1-li content_1-select" data-index="3"><a href="javascript:;">平板 · 笔记本</a></li>
                <li class="content_1-li content_1-select" data-index="4"><a href="javascript:;">电视</a></li>
                <li class="content_1-li content_1-select" data-index="5"><a href="javascript:;">盒子 · 影音</a></li>
                <li class="content_1-li content_1-select" data-index="6"><a href="javascript:;">路由器</a></li>
                <li class="content_1-li content_1-select" data-index="7"><a href="javascript:;">智能硬件</a></li>
                <li class="content_1-li"><a href="javascript:;">服务</a></li>
                <li class="content_1-li"><a href="javascript:;">社区</a></li>
            </ul>
            <div class="content_1-search">
                <input type="text" class="search-input">
                <a class="content_1-search-one" href="javascript:;">红米Pro直降400</a>
                <a class="content_1-search-two" href="javascript:;">人工智能电视</a>
                <div class="content_1-search-p"></div>
                <div class="keyword-search">
                    <ul class="keyword-search-list">
                        <li><a href="href:javascript:;">小米手机5<span>约有11件</span></a></li>
                        <li><a href="href:javascript:;">空气净化器2<span>约有1件</span></a></li>
                        <li><a href="href:javascript:;">活塞耳机<span>约有4件</span></a></li>
                        <li><a href="href:javascript:;">小米路由器<span>约有8件</span></a></li>
                        <li><a href="href:javascript:;">移动电源<span>约有21件</span></a></li>
                        <li><a href="href:javascript:;">运动相机<span>约有3件</span></a></li>
                        <li><a href="href:javascript:;">小蚁摄像机<span>约有2件</span></a></li>
                        <li><a href="href:javascript:;">小米体重秤<span>约有1件</span></a></li>
                        <li><a href="href:javascript:;">小米插线板<span>约有13件</span></a></li>
                        <li><a href="href:javascript:;">配件优惠套装<span>约有32件</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 导航栏第二部分下拉菜单 -->
        <div class="content_1-menu">
            <div class="container-menu">
                <!-- 第一个 -->
                <ul id="one" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/5s-110!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米5</p>
                        <p>1999元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/5splus-220!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米5s Plus </p>
                        <p>2299元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mi5!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米手机5 </p>
                        <p>1599元起</p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/maxdingbu!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米Max</p>
                        <p>1299元起
                            <p>
                    </li>
                </ul>
                <!-- 第二个 -->
                <ul id="two" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hongmipro-320!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米Pro</p>
                        <p>1099元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hongminote4!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米Note4 </p>
                        <p>899元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hongmi3s!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米Note3 </p>
                        <p>799元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/note3!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米手机3s</p>
                        <p>699元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/320-220!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米手机3x</p>
                        <p>799元起
                            <p>
                    </li>
                </ul>
                <!-- 第三个 -->
                <ul id="three" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mipad2-16!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米平板2#X300016GB</p>
                        <p>999元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mipad2-16!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米平板2 32GB </p>
                        <p>1299元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mipad2-64-win!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米平板2 64GB Window版</p>
                        <p>12599元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/bijiben32012.5!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米笔记本Air 12.5</p>
                        <p>3499元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/bijiben32012.5!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米笔记本Air 13.3</p>
                        <p>4999元起
                            <p>
                    </li>
                </ul>
                <!-- 第四个 -->
                <ul id="four" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101843.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 43英寸</p>
                        <p>1799元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101848.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 48英寸</p>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101855xin.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 55英寸</p>
                        <p>3499元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101860xin.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 60英寸</p>
                        <p>4499元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/101865xin.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 65英寸</p>
                        <p>4999元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/101865.png" alt="" /></a>
                        </div>
                        <p>查看全部</p>
                        <p>小米电视
                            <p>
                    </li>
                </ul>
                <!-- 第五个 -->
                <ul id="five" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hezimini.png" width="160px" height="110px" alt="" /></a>
                        </div>
                        <p>小米盒子mini版</p>
                        <p>179元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hezi3.png" width="160px" height="110px" alt="" /></a>
                        </div>
                        <p>小米盒子3</p>
                        <p>249元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hezi3s!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米盒子3 增强版</p>
                        <p>399元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/zhuji!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米电视主机</p>
                        <p>999元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/jinshuban!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米家庭音响 金属版</p>
                        <p>899元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/putonban!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米家庭音响 标准版</p>
                        <p>699元
                            <p>
                    </li>
                </ul>
                <!-- 第六个 -->
                <ul id="six" style="display:none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/miwifi!160x110.jpg" alt="" /></a>
                        </div>
                        <p>全新小米路由器</p>
                        <p>699元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/miwifi-3!160x110.png" alt="" /></a>
                        </div>
                        <p>小米路由器 3 1200M</p>
                        <p>149元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/miwifimini!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米路由器 mini</p>
                        <p>129元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/luyouqi3c!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米路由器 3C 300M</p>
                        <p>99元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/miwifilite!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米路由器 青春版</p>
                        <p>79元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/wifiExtension!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米WiFi放大器</p>
                        <p>39元
                            <p>
                    </li>
                </ul>
                <!-- 第七个 -->
                <ul id="seven" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/scooter!160x110.jpg" alt="" /></a>
                        </div>
                        <p>九号平衡车</p>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/water2!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米净水器</p>
                        <p>1299元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/dianfanbao!160x110.jpg" alt="" /></a>
                        </div>
                        <p>米家压力IH电饭煲</p>
                        <p>999元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/air2!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米空气净化器2</p>
                        <p>699元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/xiaobaishexiangji!160x110.jpg" alt="" /></a>
                        </div>
                        <p>智能摄像机</p>
                        <p>149元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/zhinengyingjian!160x110.jpg" alt="" /></a>
                        </div>
                        <p>查看全部</p>
                        <p>智能硬件
                            <p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="nav-bar">
        	<div class="nav-bar-container">
                <div class="nav-bar-title">
                    <span>小米note2</span>
                </div>
                <div class="nav-bar-right">
                    <span class="nav-switch">
                        <a href="javascript:;">概述</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;" id="active">相机</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">图集</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">参数</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">意外险</a><span>&nbsp|&nbsp</span>
                        <a href="javascript:;">F码通道</a><span>&nbsp&nbsp</span>
                    </span>
                    <a href="javascript:;">立即购买</a>
                </div>
        	</div>
        </div>
        <div style="width:100%;height:50px"></div>
	</main>
    <content>
        <div class="section section1">
            <div class="section1-container">
                <div class="section1--title">
                    细节多得惊人<br>
                    2256万超高像素相机
                </div>
                <div class="section1-suggest">
                    像素越多，细节越丰富。小米Note 2 采用索尼 IMX318 ，有效像素高达 2256万，为照片提供 5488 x 4112<br>
                    的超高分辨率，放大看依然清晰。同时内置硬件级电子防抖，你可以随时随地拍摄清晰稳定的 4K 视频。
                </div>
                <ul class="clearfix">
                    <li>
                        <span class="t-icons t-icon1"></span>
                        <p>索尼最高像素</p>
                    </li>
                    <li>
                        <span class="t-icons t-icon2"></span>
                        <p>分辨率</p>
                    </li>
                    <li>
                        <span class="t-icons t-icon3"></span>
                        <p>3轴电子防抖</p>
                    </li>
                    <div style="clear: both"></div>
                </ul>
            </div>
        </div>
        <div class="section section2">
            <div class="section2-container">
                像素数越高，记录的信息越多<br>
                即使放大看，依然清晰
            </div>
            <div class="section2-img"></div>
        </div>
        <div class="section section3">
            <div class="section3-title">来自小米Note 2 的震撼大作 </div>
            <div class="section3-content">
                灵感爆发，就立即创作吧。小米Note 2 的高画质性能和快速对焦，为你捕捉每个精彩瞬间提供了强大的基础，清晰<br>
                记录美景、人文故事的细节，每一次放大回看，都仿佛在细细品味那个故事。
            </div>
            <div class="section3-side">
                <div class="section3-carousel">
                    <div class="slide slide1"></div>
                    <div class="slide slide2"></div>
                    <div class="slide slide3"></div>
                    <div class="slide slide4"></div>
                    <div class="slide slide1"></div>
                </div>
                <div class="section3-button">
                    <span class="section3-prev"></span>
                    <span class="section3-next"></span>
                </div>
            </div>
        </div>
        <div class="section section4">
            <div class="section4-container">
                <span>
                    EIS 硬件级 4K 视频防抖<br>
                    更稳定的创作影片
                </span>
                <p>画面清晰是艺术创作的基础。手持或变焦拍摄时，常常带来小幅度晃动导致画面不清晰，EIS 硬件级防抖功<br>
                    能，有效利用 3 轴陀螺传感器，对捕捉的画面，纠正 3 个方向的抖动和镜头变形，让 4K 影片更具艺术气质。</p>
            </div>
            <div class="section4-img"></div>
        </div>
        <div class="section section5">
            <div class="section5-container">
                <span>
                    8MP 前置相机<br>
                有自动对焦相机，才是好相机
                </span>
                <p>小米Note 2 配备高达 800万像素的前置摄像头，足以为你带来的好画质。我们更引以为傲的是，它首<br>
                    次支持自动对焦。相比未支持自动对焦的相机，除了只能在限定距离时自拍清晰，还能根据近距离，或<br>
                    远距离自动对焦，自拍时每个距离都清晰。 。</p>
            </div>
            <div class="section5-img"></div>
        </div>
        <div class="section section6">
            <div class="section6-container">
                <div class="section6-inner">
                    <span class="section6-title">第三代智能美颜</span>
                    <p>
                        小米手机的智能美颜功能，一直深受用户喜爱。拍<br>
                        完自拍照，无需使用第三方软件美图，就能直接分享<br>
                        朋友圈。现在有了智能美颜3.0，还可以智能提亮肤色、<br>
                        大眼或瘦脸，你每时每刻的自拍都光彩动人。
                    </p>
                    <span class="section6-title">合影人人都清晰</span>
                    <p>
                        多人合影时，每个人都是最佳状态才能不留遗憾。<br>
                        小米Note 2 的合影优选功能，可以一次拍下多张照<br>
                        片，通过逐一扫描每个人的脸部，筛选处理后，得<br>
                        到一张人人都好看的照片，而这一切复杂的运算，<br>
                        瞬间就完成了。
                    </p>
                </div>
            </div>
        </div>
        <div class="section section7"></div>
    </content>
</body>

</html>


































